<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>JavaScript事件测试</title>
    <style>
    #a{
      width: 300px;
      height: 300px;
      background: pink;
    }
    #b{
      width: 20px;
      height: 200px;
      background: blue;
    }
    #c{
      width: 100px;
      height: 100px;
      background: yellow;
    }
      　　
    </style>
  </head>
  <body>
    <div id="a">
      a
      <div id="b">
        b
        <div id="c">c</div>
      </div>
    </div>
    <script>
      window.onload = function () {
        var a = document.getElementById("a"),
          b = document.getElementById("b"),
          c = document.getElementById("c");
        c.addEventListener("click", function (event) {
          console.log("c1"); // 注意第三个参数没有传进 false , 因为默认传进来的是 false //，代表冒泡阶段调用，个人认为处于目标阶段也会调用的
        });
        c.addEventListener(
          "click",
          function (event) {
            console.log("c2");
          },
          true
        );
        b.addEventListener(
          "click",
          function (event) {
            console.log("b");
          },
          true
        );
        a.addEventListener(
          "click",
          function (event) {
            console.log("a1");
          },
          true
        );
        a.addEventListener("click", function (event) {
          console.log("a2");
        });
        a.addEventListener(
          "click",
          function (event) {
            console.log("a3");
            event.stopImmediatePropagation();
          },
          true
        );
        a.addEventListener(
          "click",
          function (event) {
            console.log("a4");
          },
          true
        );
      };
    </script>
  </body>
</html>